<template>
    <div>
        <common-banner name="联系我们" :breads="[{ name: 'contact', label: '联系我们', to: false }]"></common-banner>

        <div class="mt-20 mb-20">
            <!-- TODO 具体标注点请https://dafrok.github.io/vue-baidu-map/#/参照修改 -->
            <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15">
                <bm-marker :position="{ lng: 116.404, lat: 39.915 }" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
                    <bm-label
                        content="北京天安门"
                        :labelStyle="{ color: 'red', fontSize: '24px' }"
                        :offset="{ width: -35, height: 30 }"
                    />
                </bm-marker>
            </baidu-map>
        </div>
        <div class="page-center">
            <div class="contact clearfix mb-20">
                <div class="company-info">
                    <p>思科（深圳）药物研发有限公司</p>
                    <p>地址：深圳市光明区凤凰街道凤凰社区招商局光明科技园B1B2栋B2-1801</p>
                    <p>电话：4000505016</p>
                    <p>QQ：3001272453</p>
                    <p>传真：0086-755-28094224</p>
                    <p>邮箱：sales@phystandard.com</p>
                </div>
                <div class="message-form">
                    <h2 class="mt-20 mb-20">在线留言</h2>
                    <el-form :model="formData" :rules="rules" ref="formRef" label-width="70px">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>

                        <el-form-item label="邮箱" prop="email">
                            <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>

                        <el-form-item label="内容" prop="content">
                            <el-input
                                v-model="formData.content"
                                type="textarea"
                                :rows="4"
                                placeholder="请输入内容"
                            ></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="submitForm" :loading="loading">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { Message } from 'element-ui'
import CommonBanner from '@/components/CommonBanner.vue'

document.title = '联系我们'

const formRef = ref(null)
const loading = ref(false)

const formData = reactive({
    name: '',
    email: '',
    content: '',
})

const rules = {
    name: [
        { required: true, message: '请输入姓名', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' },
    ],
    email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
    ],
    content: [
        { required: true, message: '请输入留言内容', trigger: 'blur' },
        { min: 5, max: 500, message: '长度在 5 到 500 个字符', trigger: 'blur' },
    ],
}

const submitForm = async () => {
    if (!formRef.value) return

    try {
        loading.value = true
        await formRef.value.validate()

        console.log('Form submitted:', formData)

        Message.success('提交成功！')
        formRef.value.resetFields()
    } catch (error) {
        Message.error('请检查表单填写是否正确')
    } finally {
        loading.value = false
    }
}
</script>
<style lang="scss" scoped>
.map {
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
}

.contact {
    color: #000;
    font-size: 16px;
}

.company-info {
    width: 50%;
    line-height: 180%;
    float: left;
}

.message-form {
    width: 50%;
    float: right;
    border: 1px solid #efefef;
    padding: 15px;
}
</style>
